<template>
  <div>
    <el-container>
      <!-- <el-header>
        
        <layoutHeaderVue :titleArray="titleHeader">
        
        </layoutHeaderVue>
      </el-header> -->
      <el-container>
      
          <!-- 左边 -->
        <!-- <el-aside width="400px">
          <barVue></barVue>
        </el-aside> -->
        <el-aside width="400px">
          <navMenuVue  class="containerNav"></navMenuVue>
          
        </el-aside>

        <el-main>
          <component :is="component"></component>
          <realTime class="rt"></realTime>
          
          <steps></steps>
          <div class="block">
    <span class="demonstration">人脸检测稳定度</span>
    <el-slider v-model="inputSize"></el-slider>
  </div>
        </el-main>
        <!-- 右边 -->
        
      </el-container>
    </el-container>
  </div>
</template>

<script>

import layoutHeaderVue from './layoutHeader.vue';
import navMenuVue from "./navMenu";
import barVue from './echarts1/bar.vue';
import steps from './steps.vue';
import statistic from './statistic.vue';
import realTime from './realTime.vue';
export default {
  data(){
     return {
        inputSize:5
     }
  },
  name: 'ContainerLayout',
  props: {
    component: {
      type: Object,
      required: true,
    },
    titleHeader: {
      type: Array,
      required: true,
    },
   
  },
  components: {
    layoutHeaderVue,
    navMenuVue,
    barVue,
    steps,
    statistic,
    realTime
  },
};
</script>

<style>
.el-container .el-main{
  margin: -20px;
}
.rt{
  transform: translate3d(181px, -600px, 17px);
}
</style>
